<template>
  <div class="cube-view-box">
    <PlaneComponent
      v-for="(v, i) of cloumnData[1]"
      :key="i"
      @pointClick="pointClick"
      class="plane-box"
      :style="getStyle(i)"
      :jsonData="jsonData"
      :cloumnData="cloumnData"
      :planeIndex="i"
    />
  </div>
</template>

<script>
export default {
  name: 'CubeView',
  components: {
    PlaneComponent: () => import('./components/PlaneComponent.vue')
  },
  props: {
    jsonData: {
      type: Array,
      default: () => {
        return []
      }
    },
    cloumnData: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  methods: {
    // 根据总体面数获取每个面的偏移量
    getStyle (index) {
      let maxPlaneLenght = this.cloumnData[1] - 1
      const MAX_OFFSET_RIGHT = 15
      const MAX_OFFSET_TOP = 30
      let right = (index * (MAX_OFFSET_RIGHT / maxPlaneLenght)) + '%'
      let top = (index * (MAX_OFFSET_TOP / maxPlaneLenght)) + '%'
      return { right, top }
    },
    // 数据点的点击事件
    pointClick (data) {
      this.$emit('pointClick', data);
    }
  }
}
</script>

<style lang="scss" scoped>
.cube-view-box {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/box-background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;

  .plane-box {
    width: 55%;
    height: 69%;
    position: absolute;
    margin: 0 17%;
  }
}
</style>